<html>
  <head>
    <script type="application/javascript">
      /** @type {HTMLCanvasElement} */
      function draw() {
        // 获得图片源
        // 1、使用相同页面内的图片
        document.images; // 获得页面内所有img元素的列表
        document.getElementsByTagName("img"); // 通过标签名进行获取dom元素
        document.getElementById("image"); // 通过ID获取dom元素
        // 2、创建图片
        var img = new Image(); // 创建 img 元素
        img.src = "myImage.png"; // 设置图片源地址
        img.onload = function () {
          // 执行 drawImage 语句
        };
        // 3、通过data:url
        img.src =
          "";
        // 4、使用视频帧
        document.getElementById("video");
        // 5、使用canvas
        document.getElementsByTagName("canvas");
        // 6、使用其它域名下的图片
        // 参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images#%E4%BD%BF%E7%94%A8%E5%85%B6%E5%AE%83%E5%9F%9F%E5%90%8D%E4%B8%8B%E7%9A%84%E5%9B%BE%E7%89%87
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
